<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>External link icon</title>
    <style>
    body {
      width: 300px;
      margin: 0 auto;
      font-family: sans-serif;
    }

    p {
      line-height: 1.4;
    }

    a {
      outline: none;
      text-decoration: none;
      padding: 2px 1px 0;
    }

    a:link {
      color: blue;
    }

    a:visited {
      color: purple;
    }

    a:focus, a:hover {
      border-bottom: 1px solid;
    }

    a:active {
      color: red;
    }

    a[href*="http"] {
      background: url('external-link-52.png') no-repeat 100% 0;
      background-size: 16px 16px;
      padding-right: 19px;
    }
    </style>
  </head>
  <body>
    <p>For more information on the weather, visit our <a href="weather.html">weather page</a>, look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>
  </body>
</html>